<template>
	<view class="data_list" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/details/details?id=${item.aid}`">
		<view class="data_img">
			<u-lazy-load :image="item.fengmiantu" height="186" border-radius="16" img-mode="aspectFill"></u-lazy-load>
		</view>
		<view class="data_name">
			<view class="data_title">{{item.kechengmingcheng}}</view>
			<view class="data_tips">{{item.jianjie}}</view>
			<view class="data_price">
				<view class="price_left">{{item.zhangjie_num}}个章节</view>
				<view class="price_text" v-if="item.jiage == 0">免费</view>
				<view class="price_text_1" v-else>{{item.jiage}}元</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				image: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
			}
		},
		created() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.data_list {
		display: flex;
		padding: 32rpx 0;
		border-bottom: 1px solid #eee;
	
		.data_img {
			width: 248rpx;
			height: 186rpx;
	
			/deep/.u-lazy-item {
				width: 248rpx;
				height: 186rpx;
			}
		}
	
		.data_name {
			width: calc(100% - 248rpx);
			padding: 0 0 0 24rpx;
	
			.data_title {
				font-size: 30rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
	
			.data_tips {
				height: 65rpx;
				font-size: 24rpx;
				color: #999999;
				margin: 16rpx 0 18rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.data_price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price_left {
					font-size: 24rpx;
					color: #666666;
				}
				.price_text {
					color: #1593FF;
					font-size: 32rpx;
				}
				.price_text_1 {
					color: #FB4141;
					font-size: 32rpx;
				}
			}
		}
	}
</style>